<template>
  <el-form :model="formData" label-width="120px">
    <el-form-item label="场所名">
      <el-input v-model="formData.name" maxlength="30" show-word-limit style="width: 300px"/>
    </el-form-item>
    <el-form-item label="地区">
      <el-cascader
          :options="options"
          v-model="selectedOptions"
          @change="handleChange">
      </el-cascader>
    </el-form-item>
    <el-form-item label="图片">
      <TuKu v-model:modelValue="formData.img"/>
    </el-form-item>
    <el-form-item label="坐标" class="coordinate">
      <el-col>
        <el-row>
          <el-input v-model="formData.lng">
            <template #prepend>经度</template>
          </el-input>
          <el-input v-model="formData.lat">
            <template #prepend>纬度</template>
          </el-input>
        </el-row>
        <el-row>
          <el-input v-model="formData.address">
            <template #prepend>地址</template>
          </el-input>
          <el-button type="primary" :icon="LocationInformation" circle @click="drawer = true"/>
        </el-row>
      </el-col>
    </el-form-item>
    <el-form-item label="排序">
      <el-input-number v-model="formData.seq" :min="1"/>
    </el-form-item>
    <el-form-item label="备注">
      <el-input type="textarea" v-model="formData.brief" maxlength="200" show-word-limit style="width: 400px"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="update">修改</el-button>
    </el-form-item>
  </el-form>
  <el-drawer v-model="drawer" title="百度地图" size="50%">
    <baidu-map class="bm-view" center="郑州" :scroll-wheel-zoom="true">
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
      <bm-marker :position="{ lng: formData.lng, lat: formData.lat }" :dragging="true"
                 :icon="{ url: 'http://developer.baidu.com/map/jsdemo/img/fox.gif', size: { width: 300, height: 157 } }"
                 @dragend="mapDragend"></bm-marker>
    </baidu-map>
  </el-drawer>
</template>

<script setup lang="ts">
import {onMounted, ref, reactive} from 'vue'
import {venueApi} from "@/api/index"
import {useRouter, useRoute} from 'vue-router'
import {regionData} from 'element-china-area-data'
import {ElMessageBox, ElMessage} from "element-plus";
import {LocationInformation} from '@element-plus/icons-vue'
import TuKu from "@/components/TuKu.vue";
import {getAddressByPoints} from "vue-baidu-map-3x";

const route = useRoute() //获取当前页面的参数
const drawer = ref(false)
const options = ref(regionData)
const formData = reactive({
  id: 0,
  name: '',
  img: '',
  province: '',
  city: '',
  country: '',
  brief: '',
  seq: 1,
  lng: '113.666342',
  lat: '34.753084',
  address: ''
})
const selectedOptions = ref([])
const handleChange = (pcc: any) => {
  formData.province = pcc[0]
  formData.city = pcc[1]
  formData.country = pcc[2]
}
onMounted(() => {
  formData.id = Number(route.query.id)
  callVenueApi()
})

const callVenueApi = () => {
  venueApi.select.call({id: formData.id}).then((res: any) => {
    let venue = res.list[0]
    formData.name = venue.name
    formData.img = venue.img
    formData.province = venue.province
    formData.city = venue.city
    formData.country = venue.country
    formData.brief = venue.brief
    formData.seq = venue.seq
    formData.lng = venue.lng
    formData.lat = venue.lat
    formData.address = venue.address
    selectedOptions.value = [venue.province, venue.city, venue.country]
  })
}
const update = () => {
  venueApi.update.call(formData).then((res: any) => {
    if (res === 1) {
      callVenueApi()
      ElMessage({
        showClose: true,
        message: '修改成功',
        type: 'success'
      })

    } else {
      ElMessage({
        showClose: true,
        message: '上传失败',
        type: 'error'
      })
    }
  })
}
const mapDragend = (event: any) => {

  formData.lat = event.point.lat
  formData.lng = event.point.lng

  const config = {location: [event.point.lat, event.point.lng]};
  getAddressByPoints(config, ['FMYihQ2aXcKidOkniSS9hv68QcH7gskK']).then((response: any) => {

    formData.address = response.formatted_address
  });

}
</script>

<style scoped>
.bm-view {
  width: 100%;
  height: 400px;
}

.coordinate .el-button, .coordinate .el-input {
  margin-bottom: 10px;
  display: block;
}

div.el-input.el-input-group.el-input-group--prepend {
  width: 270px;
}

.coordinate .el-input:nth-child(1), .coordinate .el-input:nth-child(2) {
  width: 400px;
  margin-right: 20px;
  /*display: block;*/
}

.coordinate .el-input:nth-child(3) {
  display: block;
  margin-right: 20px;
}

</style>
